<!-- 说明文案组件（含收起展开的） -->
<template>
  <div :class="[className, 'describe-text-show']" :style="{ background: background }">
    <div class="flex justify-between describe-title">
      <slot v-if="!title" name="title"></slot>
      <div v-if="title">{{ title }}</div>
      <div v-if="!hiddenExpand" class="cursor-pointer flex items-center" @click="showDescribe = !showDescribe">
        <div class="pr-1">{{ showDescribe ? '收起' : '展开' }}</div>
        <Icon v-if="showDescribe" size="14">
          <UpOutlined size="14"></UpOutlined>
        </Icon>
        <Icon v-if="!showDescribe" size="14">
          <DownOutlined></DownOutlined>
        </Icon>
      </div>
    </div>
    <div v-if="showDescribe" class="describe-content">
      <slot v-if="!content" name="content"></slot>
      <div v-if="content">{{ content }}</div>
    </div>
  </div>
  <!-- 这里是占位下面盖到的那部分白色底部 -->
  <div v-if="!hiddenNext" class="describe-text-show-next"></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { DownOutlined, UpOutlined } from '@vicons/antd'
withDefaults(
  defineProps<{
    title?: string // title的文案，如果传入，即不使用插槽
    content?: string // content 的文案，如果传入，即不使用插槽
    className?: string // 最外层的class
    hiddenNext?: boolean // 是否隐藏下面那部分白色底
    background?: string // 整个盒子的背景色
    hiddenExpand?: boolean //隐藏展开按钮
  }>(),
  {
    title: '',
    content: '',
    className: '',
    hiddenNext: false,
    background: ''
  }
)
const showDescribe = ref<boolean>(false)
</script>

<style lang="less">
.describe-text-show {
  background: #1472ff;
  color: rgba(255, 255, 255);
  padding: 16px 20px 22px;
  border-radius: @border-radius-container;
  .describe-content {
    padding-top: 8px;
    color: rgba(255, 255, 255, 0.7);
  }
}
.describe-text-show-next {
  margin-bottom: -12px;
  margin-top: -12px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding-top: 10px;
}
</style>
